<template>
  <div>
    <div class="users">
      <div class="users_hander">
        <h1 class="title">用户列表</h1>
      </div>
      <div class="users_Content">
        <el-table :data="tableData" stripe border style="width: 100%">
          <el-table-column prop="id" label="ID" width="150"></el-table-column>
          <el-table-column prop="username" label="用户名" width="200"></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>
          <el-table-column prop="phone" label="电话"></el-table-column>
          <el-table-column prop="createTime" :formatter="formatSex" label="注册时间"></el-table-column>
        </el-table>
        <el-pagination
          background
          :total="total"
          :page-size="pagesize"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { users, userssear } from "@/request/http";
//时间转换
import Time from "../../../until/Time"

export default {
  data() {
    return {
      tableData: [],
      pagesize: 10,
      currpage: 1,
      total: 0
    };
  },
  mounted() {
    this.BeforeMethod();
  },
  methods: {
    async BeforeMethod() {
      const res = await users();
      
      this.tableData = res.data.data.list;
      this.total = res.data.data.total;
    },
    handleCurrentChange(cpage) {
      this.currpage = cpage;
      userssear({pageNum:this.currpage}).then(res => {
        this.tableData = res.data.data.list;
      });
    },
    handleSizeChange(psize) {
      this.pagesize = psize;
    },
    formatSex: function(row, column, cellValue) {
      // console.log(row.updateTime);
      return Time(row.updateTime)
    }
  }
};
</script>


<style lang="scss" scoped>
.users_Content {
  margin-top: 1%;
}
.users_hander {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title {
  display: inline-block;
  font-weight: normal;
}
.users {
  width: 95%;
  margin: 0 auto;
}
</style>